<template>
	<view class="page">
		<view class="store-bg">
			<!-- <view class="back" @click="back"></view > -->
			<view class="aa">
				<navigator url="../index/index"></navigator>
			</view>
			<view class="store-name">小商水果超市</view>
			<!-- <view class="collect">
				<view class="collect-cell" id="collect-y">
					<image class="collect-img" src="../../static/image/collect-1.png"></image>
				</view>
				<view class="collect-cell" id="collect-n">
					<image class="collect-img" src="../../static/image/collect.png"></image>
				</view>
			</view> -->
		</view>	
		<view class="logo">
			<view class="store-img"></view>
			<view class="sign">认证</view>
		</view>
		<!-- <view class="notice">
			公告：500米商家配送，500米外仅支持自取
		</view> -->
		<view class="recommend">
			<view class="recommend-title">
				商家推荐
			</view>
			<scroll-view class="goods" scroll-x="true">
				<view class="block">
					<navigator url="../goods-detail/goods-detail" class="recommend-good" v-for="(item,index) in list" :key='index'>
						<view class="good-img"></view>
						<view class="good-message">
							<view class="good-name">
								{{item.name}}
							</view>
							<view class="order-num">
								已有 {{item.OrderNum}} 人下单
							</view>
							<view class="good-price">
								<view class="price-now">
									￥{{item.NowPrice}}
								</view>
								<view class="price-unit">
									/盒
								</view>
								<view class="price-old">
									￥{{item.OldPrice}}
								</view>
								<view class="good-add" @click="add"></view>
							</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<view class="bars">
			<!-- <view class="left-bar">
				<scroll-view class="left"scroll-y="true"  v-for="(item2,index2) in list2" :key="index2">
					<view class="left-title" v-model="title">{{item2}}</view>
				</scroll-view>
			</view> -->
			<view class="right-bar">
				<view class="right-title">全部商品</view>
				<scroll-view class="right" scroll-y="true" show-scrollbar="flase">
					<navigator url="../goods-detail/goods-detail" class="shops"  v-for="(item1,index1) in list1" :key='index1'>
						<view class="shops-img"></view>
						<view class="shops-message">
							<view class="shops-name">
								{{item1.name}}
							</view>
							<view class="model">
								<view class="">
									规格：{{item1.size}}
								</view>
								<view class="">
									（{{item1.count}}）
								</view>
							</view>
							<view class="order-num">
								{{item1.OrderNum}}  人已下单
							</view>
							<view class="box">
								<view class="price">
									￥{{item1.price}}
								</view>
								<view class="unit">
									 /瓶
								</view>
								<view class="shop-add"  @click="add">
									
								</view>
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view>
		</view>
		<navigator open-type="switchTab" url="../shopcar/shopcar">
			<image src="../../static/image/shopcar(1).png" style="width: 66rpx;height: 66rpx;position: fixed;right: 20rpx;bottom: 20rpx;"></image>
		</navigator>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:"",
				list:[
					{
						id:1,
						name:"现摘山东美早车厘子",
						OrderNum:18,
						NowPrice:178,
						OldPrice:256
					},
					{
						id:2,
						name:"现摘山东美早车厘子",
						OrderNum:18,
						NowPrice:178,
						OldPrice:256
					},
					{
						id:3,
						name:"现摘山东美早车厘子",
						OrderNum:18,
						NowPrice:178,
						OldPrice:256
					},
					{
						id:4,
						name:"现摘山东美早车厘子",
						OrderNum:18,
						NowPrice:178,
						OldPrice:256
					}
				],
				list1:[
					{
						id:1,
						name:"第八代经典五粮液",
						size:"500ml 浓香型高度白酒",
						count:"单瓶出售",
						OrderNum:126,
						price:1500.00
					},
					{
						id:2,
						name:"第八代经典五粮液",
						size:"500ml 浓香型高度白酒",
						count:"单瓶出售",
						OrderNum:126,
						price:1500.00
					},
					{
						id:3,
						name:"第八代经典五粮液",
						size:"500ml 浓香型高度白酒",
						count:"单瓶出售",
						OrderNum:126,
						price:1500.00
					},
					{
						id:4,
						name:"第八代经典五粮液",
						size:"500ml 浓香型高度白酒",
						count:"单瓶出售",
						OrderNum:126,
						price:1500.00
					}
				],
				list2:[
					"全部商品","商家推荐","烟酒","零食","水果","生鲜蔬菜","美食"
				]
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			add(){
				alert("添加成功")
			}
		},
		onShow() {
		},
		// mounted() {
		// 	uni.getSystemInfo({
		//   success: function (res) { 
		
		//     let obj = uni.createSelectorQuery().select('.notic')
		
		//     obj.boundingClientRect(function (data) {
		//       console.log(data)
		
		//     }).exec()
		//   }
		// })
		// }
		
		
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.page{
		width: 100%;
		height: 100%;
	}
	.store-bg{
		height: 245rpx;
		background-image: url(../../static/image/store-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.back{
		width: 13rpx;
		height: 24rpx;
		background-image: url(../../static/image/back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 75rpx;
		left: 27rpx;
		z-index: 2;
	}
	.store-name{
		width: 100%;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		position: absolute;
		top: 73rpx;
		display:inline-block;
		margin: 0 auto; 
		text-align: center;
	}
	.store-img{
		width: 171rpx;
		height: 171rpx;
		background-image: url(../../static/image/store-img.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: -100rpx auto;
		text-align: center;
	}
	.collect{
		position: absolute;
		top: 140rpx;
		right: 86rpx;
	}
	.collect-cell{
		width: 60rpx;
		height: 60rpx;
		background: #F70634;
		border: 1rpx solid #F3F3F3;
		border-radius: 50%;
	}
	.collect-img{
		width: 27rpx;
		height: 23rpx;
		margin: 19rpx 16rpx 18rpx 17rpx;
	}
	#collect-n{
		margin-top: 15rpx;
		border: 1rpx solid #F3F3F3;
		box-shadow: 2rpx 4rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
		background: #FFFFFF;
	}
	.sign{
		width: 61rpx;
		height: 41rpx;
		background-image: url(../../static/image/sign.png);
		background-size: 100% 100%;
		margin: 68rpx auto;
		margin-bottom: 0;
		text-align: center;
		line-height: 41rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.notice{
		background: #FB385C;
		color: #FFFFFF;
		font-size: 20rpx;
		line-height: 50rpx;
		margin-top: -50rpx;
		text-align: center;
	}
	.recommend{
		width: 95%;
		margin: 0 auto;
	}
	.recommend-title{
		/* margin-top: 20rpx; */
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}
	.goods{
		width: 100%;
		white-space: nowrap;
		height: 357rpx;
		/* display: flex; */
		margin-top: 20rpx;
	}
	.block{
		display: flex;
		justify-content: space-between;
	}
	.recommend-good{
		width: 244rpx;
		height: 357rpx;
		margin-right: 12rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.11);
		border-radius: 8rpx;
	}
	.good-img{
		height: 199rpx;
		background-image: url(../../static/image/good-img.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.good-message{
		margin-top: 20rpx;
		margin-left: 9rpx;
	}
	.good-name{
		width: 227rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
	}
	.order-num{
		font-size: 18rpx;
		margin-top: 13rpx;
		color: #999999;
	}
	.good-price{
		display: flex;
		margin-top: 17rpx;
	}
	.price-now{
		font-size: 24rpx;
		color: #FA563A;
		font-weight: bold;
	}
	.price-unit{
		margin: 5rpx;
		font-size: 18rpx;
		color: #999999;
	}
	.price-old{
		margin-top: 5rpx;
		font-size: 18rpx;
		color: #999999;
		text-decoration:line-through
	}
	.good-add{
		width: 36rpx;
		height: 36rpx;
		margin-left: 34rpx;
		background-image: url(../../static/image/add.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 10;
	}
	.bars{
		display: flex;
		margin-top: 30rpx;
	}
	.left-bar{
		width: 151rpx;
		height: 100%;
		margin-top: 10rpx;
		background: #F3F3F3;
	}
	.left{
		width: 151rpx;
		height: 100%;
		background: #F3F3F3;
	}
	.left-title{
		line-height: 80rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
	}
	.left-title:hover{
		border: none;
		color: #000000;
		background: #FFFFFF;
	}
	.right{
		height: 500rpx;
	}
	.right-bar{
		width: 95%;
		margin: 0 auto;
	}
	.right-title{
		font-size: 24rpx;
		font-weight: bold;
		/* line-height: 60rpx; */
	}
	.shops{
		display: flex;
		margin: 16rpx 0;
	}
	.shops-img{
		width: 158rpx;
		height: 158rpx;
		background-image: url(../../static/image/goods-img.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.shops-name{
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
	}
	.model{
		display: flex;
		margin-top: 19rpx;
		font-size: 18rpx;
		font-weight: 400;
		color: #999999;
	}
	.box{
		margin-top: 16rpx;
		display: flex;
	}
	.price{
		font-size: 24rpx;
		color: #FA563A;
		font-weight: bold;
	}
	.unit{
		margin: 5rpx;
		font-size: 18rpx;
		color: #999999;
	}
	.shop-add{
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 10rpx;
		background-image: url(../../static/image/add.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
